<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/common1.js"></script>
<script type="text/javascript" src="js/laypage/laypage.js"></script>
<link rel="stylesheet" href="js/laypage/skin/laypage.css"  media="all">
</head>
<body>
<div style="width:1400px;margin-left:20px;">
<form class="navbar-form navbar-left" role="search">
  
  <div class="form-group">
    <input type="text" class="form-control" placeholder="按所属类别查询" id="searchForClassName" >
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="按商品名称查询" id="searchForbName" >
  </div>
  <button type="button" class="btn btn-success" onclick="queryGoodsOrders(1)">查询</button>
  <input type="reset" class="btn btn-default" value="重置">
</form>

<table id="goodsOrders" class="table table-striped">
			<tr align="left" style="background-color:#F5F5DC;">
				<th>所属</th>
				<th>商品名称</th>
				<th>商品图片</th>
				<th>商品价格</th>
				<th>商品数量</th>
				<th>商品备注</th>
				<th>购买时间</th>
			</tr>
			<tr align="left" v-for="goods in goodsOrdersList">
			    
			    <td>{{goods.bgoodsAllClass}}</td>
			    <td>{{goods.bname}}</td>
			    <td>
			    <div class="col-xs-6 col-md-3" style="width:100px;">
			    <div class="thumbnail">
			    <img :src="goods.bphoto" alt="">
			    </div>
			    </div>
			    </td>
			    
			    <td>{{goods.bprice}}</td>
			    <td>{{goods.bsum}}</td>
			    <td>{{goods.gdetail}}</td>
			    <td>{{goods.btime}}</td>
			</tr>
		
</table>
<div id="laypage"></div>
</div>
</body>
<script type="text/javascript">
var vue=new Vue({
	el:'#goodsOrders',
	data:{
		goodsOrdersList:'',
	}
});
//内容分页展示
function queryGoodsOrders(currentPage){
	var gameName='';
	var goodsName='';
	className=$("#searchForClassName").val();
	goodsName=$("#searchForbName").val(); 
	$.ajax({
		 url:'queryBuyGoods.do',
		 type:'post',
		 data:{currentPage:currentPage,pageSize:2,bgoodsAllClass:className,bname:goodsName},
		 dataType:'json',
		 success:function(result){
			 console.log(result.pages);
			 var bgoodsList=result.bgoodsList;
			 console.log(bgoodsList);
			 vue.goodsOrdersList=result.bgoodsList;
			 laypage({
					cont:$("#laypage"),//容器
					pages:result.pages,//总页数
					curr:currentPage,//当前页
					//limit:5,分页数
					skin:'molv',
					skip:true,
					last:'尾页',
					groups:5,//多少页分组
					jump:function(obj,frist){
						if(!frist){
							queryGoodsOrders(obj.curr);
						}
					}
				});
		 }
	});
};
$(function(){
	queryGoodsOrders(1); 
});
</script>
</html>